<template>
  <div class="order-box">
    <div class="order-container" v-for="item in dataList" :key="item.sellerId">
      <div class="order-top">
        <div class="store-name">
          {{ item.sellerName }}<i class="el-icon-arrow-right"></i>
        </div>
        <div class="order-signle">{{ item.orderStatus | filterStatus }}</div>
      </div>
      <div class="order-center">
        <div class="order-detail-left">
          <img src="../assets/images/spicy.jpg" />
        </div>
        <div class="order-detail-center">
          <p class="merchandise-name">
            {{ item.skuName }}
          </p>
          <p class="merchandise-type">{{ item.skuAttrsVals }}</p>
          <p class="merchandise-time">
            下单时间&nbsp;{{ item.createTime | formatDate }}
          </p>
          <p class="merchandise-address">
            下单地址：{{ item.receiverProvince }}{{ item.receiverCity
            }}{{ item.receiverRegion }}{{ item.receiverDetailAddress }}
          </p>
        </div>
        <div class="order-detail-right">
          <p>￥{{ item.skuPrice }}</p>
          <span>x{{ item.skuQuantity }}</span>
        </div>
      </div>
      <div class="order-bottom">
        <div>
          实付款<span
            style="font-weight: 600; font-size: 18px; margin-left: 2px"
            >￥{{ item.totalAmount }}</span
          >
        </div>
        <div class="order-btns">
          <el-button>删除订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getOrderStatusApi } from "@/api/order";
export default {
  data() {
    return {
      dataList: [],
      userInfo: this.$store.state.userInfo
    };
  },
  props: ["orderStatus"],
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy.MM.dd");
      }

      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterStatus: function (val) {
      //  -1：全部订单； 0->待付款；1->待发货；2->已发货；3->已完成；
      var typeArr = ["全部订单", "待付款", "待发货", "待收货", "已完成"];
      return typeArr[val - 1];
    },
  },
  created() {
    this.getOrderStatusFun()
  },
  methods: {
    getOrderStatusFun() {
      getOrderStatusApi({
        userId: this.userInfo.userId,
        orderStatus: this.orderStatus,
      }).then((res) => {
        if (res.data.code == 200) {
          this.dataList = res.data.data;
        }
      });
    },
  },
};
</script>

<style>
.order-container {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
}
.order-top {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.store-name {
  font-weight: 600;
}
.order-center {
  display: flex;
  padding: 0 10px;
  margin-top: 8px;
}
.order-detail-left img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}
.order-detail-center {
  width: 80%;
  margin-left: 8px;
}
.merchandise-name,
.merchandise-address {
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  word-break: break-all;
}
.order-signle {
  color: #b5b5b5;
}
.merchandise-address,
.merchandise-type {
  font-size: 14px;
  color: #b5b5b5;
}
.merchandise-type {
  margin-top: 12px;
}
.merchandise-time {
  margin-top: 4px;
  font-size: 14px;
  color: #fb8989;
}
.merchandise-address {
  margin-top: 4px;
}
.order-detail-right {
  width: 11%;
  margin-left: 8px;
  text-align: right;
  line-height: 2;
}
.order-detail-right p {
  font-weight: 600;
}
.order-detail-right span {
  color: rgb(81, 81, 81);
}
.order-bottom {
  margin-top: 10px;
  text-align: right;
}
.order-btns {
  margin-top: 10px;
}
</style>
